<template>
  <div class="guidancePopup">
    <van-popup v-model="show" style="background: transparent" round>
      <div class="Internship_Guide">
        <div class="txt">实习店长任务指引</div>
        <template v-if="first_order_check_time_check">
          <div class="guidePoint">{{ daysUntilDeadline }}天内分享1单即可完成任务</div>
          <div class="guidePoint_time">
            <span class="guidePoint_time_txt">还剩</span>
            <van-count-down :time="check_time">
              <template #default="timeData">
                <span class="block cr">{{ timeData.days }}</span>
                <span class="colon">天</span>
                <span class="block cr">{{ set_zone(timeData.hours) }}</span>
                <span class="colon">时</span>
                <span class="block cr">{{ set_zone(timeData.minutes) }}</span>
                <span class="colon">分</span>
                <span class="block cr">{{ set_zone(timeData.seconds) }}</span>
                <span class="colon">秒</span>
              </template>
            </van-count-down>
          </div>
        </template>
        <div class="task" v-if="otherInfo">
          <div class="taskTag" :class="{ selectTask: otherInfo.wechat_follow == 1 }">
            <div class="rightIcon"><i class="iconfont icon-icon_select1"></i></div>
            加导师/公众号
          </div>
          <div class="taskTag" :class="{ selectTask: otherInfo.guide_status == 2 }" v-if="guide_show_status == 1">
            <div class="rightIcon"><i class="iconfont icon-icon_select1"></i></div>
            速成课
          </div>
          <div class="taskTag" :class="{ selectTask: otherInfo.first_order_status == 1 }">
            <div class="rightIcon"><i class="iconfont icon-icon_select1"></i></div>
            分享一单点亮
          </div>
        </div>
        <div class="btn">
          <template v-if="otherInfo.wechat_follow == 0">
            <div class="btn_c btn_b" @click="sharePoster">{{ otherInfo.wechat_follow == 1 ? "已关注公众号" : "去关注公众号" }}</div>
            <div class="btn_c" @click="todiyBg">{{ otherInfo.wechat_follow == 1 ? "已添加导师" : "去添加导师" }}</div>
          </template>
          <template v-else-if="(otherInfo.guide_status == 0 || otherInfo.guide_status == 1) && guide_show_status == 1">
            <div class="btn_c btn_b" v-if="otherInfo.guide_status == 0" @click="to_internship_Guide">学习开店速成课</div>
            <div class="btn_c btn_b" v-if="otherInfo.guide_status == 1" @click="guideFinish">已完成速成课</div>
            <div class="btn_c" @click="to_internship_Guide">再学一遍</div>
          </template>
          <template v-else-if="otherInfo.first_order_status == 0 && (otherInfo.guide_status == 2 || guide_show_status == 1 || guide_show_status == 0) && otherInfo.wechat_follow == 1">
            <div class="btn_c" @click="toOpenOrder">开单专区</div>
          </template>
        </div>
      </div>
      <div class="link">
        <img src="https://mini-app-img-1251768088.cos.ap-guangzhou.myqcloud.com/cloud_shop%2Flink%402x.png" alt="" />
      </div>
      <div class="tips">
        <div class="tips_txt">
          <img src="https://mini-app-img-1251768088.cos.ap-guangzhou.myqcloud.com/cloud_shop%2Fht_content_systemmessage%402x.png" alt="" />
          <span>提示</span>
        </div>
        <div class="tips_b">
          <div class="tips_b_txt">七天内未完成分享一单将会被回收实习店长身份，失去卖货权限。</div>
          <div class="btn" @click="close">确认</div>
        </div>
      </div>
    </van-popup>
  </div>
</template>
<script>
export default {
  props:['guide_show_status'],
  data() {
    return {
      show: false,
      nowTime: parseInt(new Date().getTime() / 1000),
      otherInfo: []
    };
  },
  methods: {
    close() {
      this.show = false;
    },
    async guideFinish() {
      let { data, msg, result } = await $http.post("plugin.cloud-shop.frontend.guide.guideFinish", {}, "");
      if (result) {
        this.$toast(msg);
        this.$emit("update_guide_status");
      } else {
        this.$toast(msg);
      }
    },
    toOpenOrder() {
      this.$router.push(this.fun.getUrl("billing_Zone", {}));
    },
    to_internship_Guide() {
      this.$router.push(this.fun.getUrl("internship_Guide", {}));
    },
    // 公众号关注海报
    sharePoster() {
      this.$emit("show_poster");
    },
    // 后台上传的自定义图片路由未定义
    todiyBg() {
      if (otherInfo.wechat_follow == 1) return;
      this.$router.push(this.fun.getUrl("cloud_shop_diyPage", {}));
    },
  },
  computed: {
    set_zone(key) {
      return function(key) {
        if (key < 10) {
          return "0" + key;
        }
        return key;
      };
    },
    check_time() {
      if (!this.otherInfo) return;
      let time = (this.otherInfo.first_order_check_time - this.nowTime) * 1000;
      return time;
    },
    first_order_check_time_check() {
      if (this.otherInfo.first_order_check_time * 1000 <= Date.now()) {
        return false;
      }
      return true;
    },
    daysUntilDeadline() {
      if (!this.otherInfo) return;
      const currentTime = Date.now(); // 当前时间的时间戳
      const deadlineTime = this.otherInfo.first_order_check_time * 1000; // 截止时间的时间戳，乘以1000转换为毫秒

      const timeDifference = deadlineTime - currentTime; // 时间差（毫秒）
      const daysDifference = Math.ceil(timeDifference / (1000 * 60 * 60 * 24)); // 转换为天数

      return daysDifference;
    }
  }
};
</script>
<style lang="scss" scoped>
.tips {
  width: 18.31rem;
  height: 5.78rem;
  background: linear-gradient(270deg, #ffb871 0%, #f96d20 100%);
  border-radius: 0.75rem 0.75rem 0.75rem 0.75rem;
  margin: 0 auto;
  padding: 0.72rem;
  box-sizing: border-box;
  .tips_b {
    display: flex;
    align-items: center;
    margin-top: 0.5rem;
    .tips_b_txt {
      font-size: 0.81rem;
      color: #ffffff;
      text-align: left;
    }
    .btn {
      flex-shrink: 0;
      font-weight: 500;
      font-size: 0.88rem;
      color: #f96d20;
      padding: 0.56rem 1.16rem;
      box-sizing: border-box;
      border-radius: 1.13rem;
      background: #ffffff;
    }
  }
  .tips_txt {
    font-weight: bold;
    font-size: 0.94rem;
    color: #ffffff;
    display: flex;
    align-items: center;
    img {
      width: 1rem;
      height: 1.26rem;
      margin: 0;
      margin-right: 0.38rem;
    }
  }
}
.link {
  margin-top: 0.31rem;
  img {
    height: 3rem;
  }
}
.Internship_Guide {
  width: 21.56rem;
  // margin: 0 0.94rem;
  padding: 0.75rem 0.75rem 0.94rem 0.75rem;
  box-sizing: border-box;
  border-radius: 0.47rem;
  background: linear-gradient(180deg, #fce3e3 0%, rgba(241, 83, 83, 0) 4.06rem);
  background-color: #ffffff;
  .txt {
    font-weight: bold;
    font-size: 1.25rem;
    color: #333333;
  }
  .guidePoint {
    font-size: 0.81rem;
    color: #333333;
    margin-top: 0.94rem;
  }
  .btn {
    display: flex;
    justify-content: space-around;
    .btn_c {
      min-width: 9.38rem;
      height: 2.25rem;
      background: #f15353;
      border-radius: 1.13rem 1.13rem 1.13rem 1.13rem;
      font-weight: 500;
      font-size: 0.88rem;
      color: #ffffff;
      line-height: 2.25rem;
      text-align: center;
      margin: 0 auto;
    }
    .btn_b {
      background: #ffffff;
      border: 0.03rem solid #f15353;
      font-weight: 500;
      font-size: 0.88rem;
      color: #f15353;
    }
  }
  .task {
    display: flex;
    justify-content: space-between;
    .taskTag {
      font-size: 0.75rem;
      color: #333333;
      width: 6.34rem;
      height: 2.5rem;
      box-sizing: border-box;
      background: #f5f5f5;
      border-radius: 0.5rem;
      border: 0.03rem solid #aaaab3;
      position: relative;
      display: flex;
      align-items: center;
      justify-content: center;
      margin: 0.78rem 0 0.94rem 0;
      .rightIcon {
        position: absolute;
        right: 0;
        top: 0;
        width: 1.13rem;
        height: 0.8rem;
        background: #aaaab3;
        border-radius: 0rem 0.4rem 0rem 0.38rem;
        display: flex;
        justify-content: center;
        align-items: center;
        .icon-icon_select1 {
          color: #ffffff;
          font-size: 0.6rem;
        }
      }
    }
    .selectTask {
      background: rgba(241, 83, 83, 0.06);
      border: 0.03rem solid #f15353;
      color: #f15353;
      .rightIcon {
        background: #f15353;
      }
    }
  }
  .guidePoint_time {
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 0.75rem;
    color: #333333;
    margin-top: 0.4rem;
    .guidePoint_time_txt {
      margin-right: 0.25rem;
    }
    .block {
      font-size: 0.75rem;
      color: #333333;
    }

    .cr {
      font-size: 0.75rem;
      color: #f15353;
      padding: 0.19rem 0.22rem;
      box-sizing: border-box;
      border-radius: 0.38rem;
      background: #feeded;
      margin: 0 0.13rem;
    }
  }
}
</style>
